<template>
  <div class="swiper">
    <div class="swiper_imgs">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <img :src="item.picUrl" width="100%"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="swiper_classify">
      <div class="swiper_classify_items">     
        <div class="swiper_classify_item">
          <p class="swiper_classify_icon">
            <img width="100%" src="../../assets/girdIcon/爱心.png" alt="" />
          </p>
          <p class="swiper_classify_text">签到</p>
        </div>
        <div class="swiper_classify_item">
          <p class="swiper_classify_icon">
            <img width="100%" src="../../assets/girdIcon/星星.png" alt="" />
          </p>
          <p class="swiper_classify_text">礼券</p>
        </div>
        <div class="swiper_classify_item">
          <p class="swiper_classify_icon">
            <img width="100%" src="../../assets/girdIcon/皇冠 .png" alt="" />
          </p>
          <p class="swiper_classify_text">砍价</p>
        </div>
        <div class="swiper_classify_item">
          <p class="swiper_classify_icon">
            <img width="100%" src="../../assets/girdIcon/吊灯.png" alt="" />
          </p>
          <p class="swiper_classify_text">专栏</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      banner: [],
    };
  },
  mounted() {
    this.$API.getBanner().then((res) => {
      this.banner = res.data.data;
    });
  },
};
</script>
<style scope>
.slideshow_container {
  width: 100%;
  height: 40vh;
  background-color: rosybrown;
}

.swiper {
  position: relative;
}
.swiper_imgs img {
  height: 15rem;
}
.swiper_classify {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.18rem;
  background-color: #fff;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.swiper_classify_items {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.swiper_classify_item {
  text-align: center;
  font-size: 0.3rem;
  color: #333;
}
.swiper_classify_icon {
  width: 0.8rem;
}
</style>